<template>
	<view  style="background: #ffffff; position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;">
		<view class="notes">
			<p style="width: 80px;"><span>*</span>物料外发</p>
			<u-collapse
			    @change="change"
			    @close="close"
			    @open="open"
			  >
			    <u-collapse-item
				  
			      title="上传单据"
			      name="uploadImg"
			    >
			     <!-- 上传  -->
				  <u-upload   
				  		:fileList="fileList1"
				  		@afterRead="afterRead"
				  		@delete="deletePic"
				  		name="1"
				  		multiple
				  		:maxCount="1"
				  	></u-upload>
					
				  <button style="width: 90px; height: 40px; font-size: 15px;"  @click="uploadImg" >上传</button>		  
			    </u-collapse-item>
			  </u-collapse>
		</view>
		<view class="uni-common-mt">
			<view class="uni-form-item uni-column user-input">
				<view style="width: 80px; font-size: 16px;">物料编码:</view>
				<view class="input">
					<input class="uni-input" v-module="materialCode"  maxlength="10" placeholder="A122sd5225" />
				</view>
			</view>
			<u-gap height="5px" bgColor="#f7f7f7 "></u-gap>
			<view class="uni-form-item uni-column user-input" >
				<view style="width: 80px; font-size: 16px;">物料名称:</view>
				<view class="input">
					<input class="uni-input" v-module='materialName' maxlength="10" placeholder="666" />
				</view>
			</view>
			<u-gap height="5px" bgColor="#f7f7f7 "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view class="title">规格:</view>
				<view class="input">
					<input class="uni-input" v-model="materialModel"  maxlength="10" placeholder="零件11" />
				</view>
			</view>
			<u-gap height="5px" bgColor="#f7f7f7 "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view class="title"> 品牌: </view>
				<view class="input">
					<input class="uni-input" v-module='brand' maxlength="10" placeholder="15968752526" />
				</view>
			</view>
			<u-gap height="5px" bgColor="#f7f7f7 "></u-gap>
			<view class="uni-form-item uni-column user-input">
				<view class="title">数量:</view>
				<view class="input">
					<input class="uni-input"  maxlength="10" placeholder="185956622@qq.com" />
				</view>
			</view>
			
			<view  style="padding-left: 16px; font-size: 16px;" > 备注:</view>
			<view class="uni-form-item uni-column user-input">
				<view class="textarea_box">
					<textarea class="textarea" style="height: 100px;" placeholder="请填写物料备注........" placeholder-style="font-size:28rpx" maxlength="100" @input="descInput" v-model="desc" />
					<view class="num">{{ desc.length }}/100</view>
				</view>	
				
			</view>
		</view>
		<button class="up-button" @click="upInfo()">提交信息</button>
		<userTab selectedIndex = 1></userTab>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openid: '',
				user: {},
				
				information: {
					materialCode: '', //物料编码
					materialName: '',  //物料名称
					materialModel: '', //规格
					brand: '',         //品牌
				},
				
				desc: ''   ,//文本域
				
				fileList1: [],// 图片上传
				 
		}
		},
		// 进入页面从缓存获取用户openid
		onShow() {
			// console.log('ref', this.$refs)
			var that = this
			wx.getStorage({
				key: 'openid',
				success(res) {
					
					// 跳转userInform方法，传入openid进行查询用户信息
					that.userInform(res.data)
				}
				
			})
		},
		methods:{
			
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log("*** lists  ********",lists) 
				let fileListLen = this[`fileList${event.name}`].length
				console.log("-----------",fileListLen)
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						// status: 'uploading',
						message: '上传中'
					})
				})
				// for (let i = 0; i < lists.length; i++) {
				// 	const result = await this.uploadFilePromise(lists[i].url)
				// 	let item = this[`fileList${event.name}`][fileListLen]
				// 	this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
				// 		status: 'success',
				// 		message: '',
				// 		url: result
				// 	}))
				// 	fileListLen++
				// }
			},
		// 	uploadFilePromise(url) {
		// 		return new Promise((resolve, reject) => {
		// 			let a = uni.uploadFile({
		// 				url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
		// 				filePath: url,
		// 				name: 'file',
		// 				formData: {
		// 					user: 'test'
		// 				},
		// 				success: (res) => {
		// 					setTimeout(() => {
		// 						resolve(res.data.data)
		// 					}, 1000)
		// 				}
		// 			});
		// 		})
		// },
			//  折叠
			open(e){},
			change(e){},
			close(e){},
			
			// 上传单据  
			uploadImg(){
				console.log("上传单据-------")
			},
			
			//  文本域
			descInput(e) {
				console.log(e.detail.value.length, '输入的字数')
			},
			
			 bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			// 绑定输入监听事件
			onName(event) {
				console.log(event)
				this.information.username = event.target.value
			},
			onCompany(event) {
				console.log(event)
				this.information.company = event.target.value
			},
			onPosition(event) {
				console.log(event)
				this.information.position = event.target.value
			},
			onPhone(event) {
				console.log(event)
				this.information.phone = event.target.value
			},
			onEmail(event) {
				console.log(event)
				this.information.email = event.target.value
			},
			onAddress(event) {
				console.log(event)
				this.information.address = event.target.value
			},
			onWeixin(event) {
				console.log(event)
				this.information.weixin = event.target.value
			},
			onInformation(event) {
				console.log(event)
				this.information.information = event.target.value
			},
			upInfo() {
				// 点击上传信息按钮触发的方法
				var that = this
				uni.request({
					url: 'http://localhost:3000/web/api/rest/user/' + that.user.id,
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					method: 'PUT',
					data: {
						// 将json数据转化成字符串格式进行上传
						information: JSON.stringify(that.information)
					},
					success: (res) => {
						console.log(res)
					}
				})
			},
			
			// 获取用户信息的方法
			userInform(openid) {
				var that = this
				uni.request({
					url: 'http://localhost:3000/web/is_register/' + openid,
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					method: 'GET',
					success(res) {
						console.log('用户信息', res)
						that.user = res.data[0]
						
						that.information = that.user.information
					},
					error(err){
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.title{
		width: 50px;
		height: 22px;
		font-size: 16px;
	}
	// 文本域
	.textarea_box{
		padding: 20rpx;
		background-color: #f7f7f7;
		::v-deep.uni-textarea-textarea{
			font-size: 28rpx;
			line-height: 45rpx;
		}
		.num{
			text-align: right;
			color: gray
		}
	}
	
	
	.user-input{
		width: 335px;
		margin: 5px auto;
		display: flex;
		.input{
			width: 260px;
			margin-left: 10px;
		}
	}

	.fenjie{
		width: 335px;
		height: 1px;
		background: #ddd;
		margin: 0 auto;
	}

	.up-button{
		width: 160px;
		height:40px;
		background: #488ac7;
		border-radius: 4px;
		font-size: 16px;
		line-height: 40px;
		color: white;
		margin-top: 30px;
	}

	.notes{
		width: 20%px;
		margin: 10px auto 30px;
		font-size: 14px;
		
		span{
			color: red;
			margin-right: 4px;
		}
		p{
			color: #999;
		}
	}
</style>
